//dom页面加载完成
$(function () {
    //执行代码
    console.log("页面加载完成")
    list=[
        "topnews", //0 头条
        "huabian", //1 娱乐
        "esports",//2 电竞
        "nba",  //3 nba
    ]
    //完成Tab栏的切换效果功能
    //选择li元素 添加tab栏点击事件
    $(".tab li").click(function () {
        // console.log("点击触发")
        // 切换功能 排他思想
        // 第一步：给当前点击的Li 添加current样式
        // 1、this 当前点击的dom元素
        // console.log(this);
        // 2、dom元素要转换成jq对象
        // console.log($(this));
        // $(this).addClass("current");
        // 第二步、移除除了当前点击li外的样式
        // $(this).siblings().removeClass("current");
        // 链式调用
        //给当前点击对象添加选中样式，其它移除选中样式
        $(this).addClass("current").siblings().removeClass("current");

        page=1
        //获取当前元素处于的位置
        getData($(this).index())
    });
    // console.log($.ajax())
    // $.ajax()=>调用一方法$对象里面的方法
    // {} => js对象
    // url 请求的接口地址
    // type 请求方式
    // success 请求成功后会执行的方法 也叫回调函数
    // error 请求失败后会执行的方法 也叫回调函数
    page=1
    getData(1)
  
    // // 1 3 2问题
    // // 绑定的时候 是没有这个新闻数据 绑定不到点击事件
    // $(".container .card").click(function () {
    //     console.log(".container .card click")
    //     window.location.href = $(this).data("url");
    // })
    //点击内容的时候 跳转新闻链接
    $(".container").on("click", ".card", function () {
        window.location.href = $(this).data("url");
    })

    function getData(index){
        $.ajax({
            url: `http://api.tianapi.com/${list[index]}/index?key=7db75f0a8b9e89d93762b622eea1a8f0&page=`+page, // 请求路径
            type: "GET", //请求方式
            //请求成功之后的回调
            success: function (data) {
                  // 异步请求 不会等待请求成功或失败就会执行下一步代码
                // console.log("data1",data1)
                //定义一个变量保存需要拼接的html代码
                var html = "";
                // 遍历数据列表 把每项新闻数据组装成html代码
                $.each(data.newslist, function (index, item) {
                    //新写法 注意兼容性 低版本IE不能使用
                    // var str = `<div class="card" data-url="${item.url}">`;
                    //旧写法
                    // var str = '<div class="card" data-url="' + item.url + '">';
                    //通过${}把js的变量跟html代码拼接在一起
                    html += `
                    <div class="card" data-url="${item.url}">
                        <div class="left"><img src="${item.picUrl}" alt=""></div>
                        <div class="right">
                            <h5>${item.title}</h5>
                            <div class="sourse-content">
                                <span>来源：${item.source}</span>
                                <span>${item.ctime}</span>
                            </div>
                        </div>
                    </div>
                    `
                })
                
                //最终把新闻列表的内容追加到新闻容器上
                if(page==1)
                {
                    $(".container").html(html)
                }
                else{
                    $(".container").append(html)
                }
            },//响应成功后的回调函数
            //表示如果请求响应出现错误，会执行的回调函数
            error: function () {
                alert("出错啦...")
            },
            dataType: "json"//设置接受到的响应数据的格式 text 普通的文本字符串
        });
    }
    //滚动条监听事件
    $(window).scroll(function () {
        // 当滚动条上方的高度大于等于页面内容的高度的时候 就代表页面滚动到底部了
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            console.log("到底部了");
            // 要做的事情 加载下一页新闻
            page++;
            getData($(".current").index());
        }
    });


})
// //函数调用
// 函数名(参数);
// // 匿名函数（参数）
// $(function(){

// })